<template>
  <el-card class="app-container">
    <el-form :inline="true" :model="roleInfo" class="demo-form-inline">
      <el-form-item>
        <el-input size="small" v-model="roleInfo.user" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="search">查询</el-button>
        <el-button size="small" @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-button size="small" type="primary" @click="add">添加</el-button>
    <el-button size="small" type="danger" :disabled="this.checkAllstate.length == 0"
      @click="deleteMore">批量删除</el-button>
    <!-- 列表 -->
    <el-table border :data="tableData" tooltip-effect="dark" style="width: 80%;margin: 20px 0;"
      @selection-change="checkArrChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="序号" width="80" type="index">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="150">
        <template slot-scope="{row,$index,column}">
          <el-input v-if="showinput==$index" v-model="row.roleName"></el-input>
            <div v-else >{{row.roleName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="{row,$index,column}">
          <el-button size="mini" type="success" @click="setRolePower(row)">分配</el-button>
          <el-button size="mini" type="primary"
            @click="updateRole(row)">更新</el-button>
          <el-button size="mini" type="primary"  @click="edit($index)">编辑</el-button>
          <el-button size="mini" type="danger"  @click="deleteRole(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination @size-change="setpageSize" @current-change="setPage" :current-page.sync="page"
      :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="prev, pager, next, jumper,->,sizes" :total="total">
    </el-pagination>
    <el-dialog :title="'添加角色'" :visible.sync="dialogShow">
      <el-form ref="addForm" :model="form">
        <el-form-item label="请输入新名称" :label-width="'120px'">
          <el-input v-model="form.newName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { getRoleList, removeRole, removeRoles, saveRole, updateRole } from '@/api/acl/person'
export default {
  data() {
    return {
      roleInfo: {user: '',},
      total: 0,
      // 表格数据
      tableData: [],
      // 全选单选状态
      checkAllstate: [],
      page: 1,
      pageSize: 5,
      dialogShow: false,
      form: {newName: ''},
      showinput: -1,
    }
  },
  //方法
  methods: {
    // 更新角色
    async updateRole(row) {
      this.showinput = -1
      await updateRole(row)
      alert('更新角色成功')
      this.getData()
    },
    // 编辑角色
    edit (index){
      console.log(index);
      this.showinput = index
    },
    // 删除角色
    async deleteRole(row) {
      await removeRole(row.id)
      alert('删除角色成功')
      this.getData(this.page)
    },
    // 分配权限
    setRolePower(row) {
      this.$router.push({
        path: '/acl/tree',
        query: {
          id: row.id,
          roleName: row.roleName
        }
      })
    },
    // 获取数据
    async getData(page = this.page, pageSize = this.pageSize, searchParams) {
      const result = await getRoleList(page, pageSize, searchParams)
      // console.log(result);
      this.tableData = result.data.items
      this.total = result.data.total
    },
    // 查询
    search() {
      this.getData(1, this.pageSize, this.roleInfo.user)
    },
    // 清空
    reset() {
      this.roleInfo.user = ''
      this.getData(1)
    },
    // 添加
    add() {
      this.form.newName = ''
      this.dialogShow = true
    },
    // 确定添加
    async confirm() {
      await saveRole({ roleName: this.form.newName })
      alert('添加角色成功')
      this.form.newName = ''
      this.dialogShow = false
      this.getData()
    },
    // 批量删除
    async deleteMore() {
      try{
        console.log(this.checkAllstate);
        await removeRoles(this.checkAllstate)
        alert('删除成功')
        this.getData()
      }catch{
        alert('删除失败')
      }
    },
    //分页器的回调
    checkArrChange(val) {
      this.checkAllstate = val.map(item => item.id);
    },
    setpageSize(val) {
      this.pageSize = val
      this.getData()
    },
    setPage(val) {
      this.page = val
      this.getData()
    }
  },
  //生命周期钩子
  mounted() {
    this.getData()
  },
}
</script>

